<template>
    <div class="tabNav">
        <div class="fl parent">
            <div class="btnTab" :class="{active:Product_current_seclected == index}" :data-id="item.id" :key="item.id" v-for="(item,index) in Product_tabList" @click="toggleBtn(item.components,index)">{{item.title}}
            <b @click.stop="deleteBtn(index)" v-show="item.delShow"></b>
            </div>
        </div>
        <div class="fr person">
            <span class="avatar"><img :src="activeimg" alt="头像"> </span>
            <router-link :to="{path: '/account'}" class="personal">{{personName}}</router-link>
            <span class="signOut" @click="signOut"></span>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        active: true,
        oneTab: "",
        routeName: "",
        cur: 0,
        tabList: "",
        activeimg: "",
        personName: ""
      };
    },
    computed: {
      Product_current_seclected() {
        if (this.routeName == "stroke") {
          return this.$store.state.stroke.curSeclected;
        } else if (this.routeName == "guider") {
          return this.$store.state.guider.curSeclected;
        } else if (this.routeName == "travelgency") {
          return this.$store.state.travelgency.curSeclected;
        } else if (this.routeName == "journal") {
          return this.$store.state.journal.curSeclected;
        } else if (this.routeName == "group") {
          return this.$store.state.group.curSeclected;
        } else if (this.routeName == "clients") {
          return this.$store.state.clients.curSeclected;
        } else if (this.routeName == "product") {
          return this.$store.state.product.curSeclected;
        }
      },
      Product_tabList() {
        if (this.routeName == "stroke") {
          return this.$store.state.stroke.tabList;
        } else if (this.routeName == "guider") {
          return this.$store.state.guider.tabList;
        } else if (this.routeName == "travelgency") {
          return this.$store.state.travelgency.tabList;
        } else if (this.routeName == "group") {
          return this.$store.state.group.tabList;
        } else if (this.routeName == "clients") {
          return this.$store.state.clients.tabList;
        } else if (this.routeName == "journal") {
          return this.$store.state.journal.tabList;
        } else if (this.routeName == "product") {
          return this.$store.state.product.tabList;
        }
      }
    },
    props: ["subNav"],
    watch: {
      subNav: function(val) {
        // 切换头部名称为二级导航名称
        if (this.routeName == "stroke") {
          if (val == "" || val == " ") {
            val = "行程管理";
          }
          return (this.$store.state.stroke.tabList[0].title = val);
        }
        if (this.routeName == "guider") {
          if (val == "" || val == " ") {
            val = "导游管理";
          }
          return (this.$store.state.guider.tabList[0].title = val);
        }
        if (this.routeName == "clients") {
          if (val == "" || val == " ") {
            val = "客户资料";
          }
          return (this.$store.state.clients.tabList[0].title = val);
        }
        if (this.routeName == "travelgency") {
          if (val == "" || val == " ") {
            val = "旅行社";
          }
          return (this.$store.state.travelgency.tabList[0].title = val);
        }
        if (this.routeName == "journal") {
          if (val == "" || val == " ") {
            val = "导游日志";
          }
          return (this.$store.state.journal.tabList[0].title = val);
        }
        if (this.routeName == "group") {
          if (val == "" || val == " ") {
            val = "派团管理";
          }
          return (this.$store.state.group.tabList[0].title = val);
        }
        if (this.routeName == "product") {
          if (val == "" || val == " ") {
            val = "产品管理";
          }
          return (this.$store.state.group.tabList[0].title = val);
        }
      }
    },
    methods: {
      jugeTab() {
        // tab信息 判断处于哪一个模块 去加载相应的self.tabList selected
        var self = this;
        var routeName = self.$route.name.toLowerCase(); // 获取当前路由的信息
        self.routeName = routeName;
        switch (routeName) {
          case "stroke":
            self.oneTab = "行程管理";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_JOURNAL_TAB"); //导游日志
            self.$store.commit("DEFAULT_GUIDER_TAB"); //导游管理
            self.$store.commit("DEFAULT_TRAVELGENCY_TAB");
            self.$store.commit("DEFAULT_GROUP_TAB"); //派团管理
            self.$store.commit("DEFAULT_CLIENTS_TAB"); //
            self.$store.commit("DEFAULT_PRODUCT_TAB");
            break;
          case "guider":
            self.oneTab = "导游管理";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_STROKE_TAB"); //行程
            self.$store.commit("DEFAULT_JOURNAL_TAB"); //导游日志
            self.$store.commit("DEFAULT_TRAVELGENCY_TAB");
            self.$store.commit("DEFAULT_GROUP_TAB"); //派团管理
            self.$store.commit("DEFAULT_CLIENTS_TAB"); //
            self.$store.commit("DEFAULT_PRODUCT_TAB");
            break;
          case "group":
            self.oneTab = "派团管理";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_STROKE_TAB"); //行程
            self.$store.commit("DEFAULT_GUIDER_TAB"); //导游管理
            self.$store.commit("DEFAULT_TRAVELGENCY_TAB");
            self.$store.commit("DEFAULT_JOURNAL_TAB"); //导游日志
            self.$store.commit("DEFAULT_CLIENTS_TAB"); //\
            self.$store.commit("DEFAULT_PRODUCT_TAB");
            break;

          case "journal":
            self.oneTab = "导游日志";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_STROKE_TAB"); //行程
            self.$store.commit("DEFAULT_TRAVELGENCY_TAB");
            self.$store.commit("DEFAULT_GUIDER_TAB"); //导游管理
            self.$store.commit("DEFAULT_GROUP_TAB"); //派团管理
            self.$store.commit("DEFAULT_CLIENTS_TAB"); //
            self.$store.commit("DEFAULT_PRODUCT_TAB");
            break;
          case "travelgency":
            self.oneTab = "旅行社";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_STROKE_TAB"); //行程
            self.$store.commit("DEFAULT_JOURNAL_TAB");
            self.$store.commit("DEFAULT_GUIDER_TAB"); //导游管理
            self.$store.commit("DEFAULT_GROUP_TAB"); //派团管理
            self.$store.commit("DEFAULT_CLIENTS_TAB"); //
            self.$store.commit("DEFAULT_PRODUCT_TAB");
            break;
          case "clients":
            self.oneTab = "客户资料";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_STROKE_TAB"); //行程
            self.$store.commit("DEFAULT_JOURNAL_TAB");
            self.$store.commit("DEFAULT_GUIDER_TAB"); //导游管理
            self.$store.commit("DEFAULT_GROUP_TAB"); //派团管理
            self.$store.commit("DEFAULT_TRAVELGENCY_TAB");
            self.$store.commit("DEFAULT_PRODUCT_TAB");
            break;
          case "pruduct":
            self.oneTab = "产品管理";
            // 恢复其他页面 vuex状态 初始值
            self.$store.commit("DEFAULT_STROKE_TAB"); //行程
            self.$store.commit("DEFAULT_JOURNAL_TAB");
            self.$store.commit("DEFAULT_GUIDER_TAB"); //导游管理
            self.$store.commit("DEFAULT_GROUP_TAB"); //派团管理
            self.$store.commit("DEFAULT_TRAVELGENCY_TAB");
            self.$store.commit("DEFAULT_CLIENTS_TAB");
            break;
        }
      },
      toggleBtn(components, index) {
        //TAB 切换
        if (this.routeName == "stroke") {
          this.$store.commit("TOGGle_STROKE_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "guider") {
          this.$store.commit("TOGGle_GUIDER_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "test") {
          this.$store.commit("TOGGle_TEST_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "travelgency") {
          this.$store.commit("TOGGle_TRAVELGENCY_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "group") {
          this.$store.commit("TOGGle_GROUP_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "clients") {
          this.$store.commit("TOGGle_CLIENTS_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "journal") {
          this.$store.commit("TOGGle_JOURNAL_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
        if (this.routeName == "product") {
          this.$store.commit("TOGGle_PRODUCT_COMPONENT_BTN", index);
          this.$emit("transferTab", components, index);
        }
      },
      deleteBtn(index) {
        //删除索引值对应的 tabelList数组元素
        if (this.routeName == "stroke") {
          this.$store.commit("DELETE_STROKE_BTN", index);
        } else if (this.routeName == "guider") {
          this.$store.commit("DELETE_GUIDER_BTN", index);
        } else if (this.routeName == "test") {
          this.$store.commit("DELETE_TEST_BTN", index);
        } else if (this.routeName == "travelgency") {
          this.$store.commit("DELETE_TRAVELGENCY_BTN", index);
        } else if (this.routeName == "group") {
          this.$store.commit("DELETE_GROUP_BTN", index);
        } else if (this.routeName == "clients") {
          this.$store.commit("DELETE_CLIENTS_BTN", index);
        } else if (this.routeName == "journal") {
          this.$store.commit("DELETE_JOURNAL_BTN", index);
        } else if (this.routeName == "product") {
          this.$store.commit("DELETE_PRODUCT_BTN", index);
        }
      },
      signOut() {
        //退出登录
        var self = this;
        layer.confirm(
          "是否退出账号?",
          {
            btn: ["确定", "取消"] //按钮
          },
          function() {
            layer.closeAll();
            sessionStorage.removeItem("platform"); //清除  用户信息
            // 刷新页面  清除vuex的数据
            setTimeout(function() {
              self.$router.push({
                path: "/"
              });
              window.location.reload();
            }, 20);
          }
        );
      }
    },
    mounted() {
      var self = this;
      self.jugeTab();
      // 判断有没有登录
      if (sessionStorage.length == 0) {
        self.$router.push({ path: "/" });
      } else {
        self.personName = JSON.parse(sessionStorage.getItem("customer")).name;
        self.activeimg = JSON.parse(sessionStorage.getItem("customer")).face;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .tabNav {
    border-bottom: 1px solid #e6e1df;
    .parent {
      max-width: 85%;
    }
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    color: #4e5e7e;
    font-size: 12px;
    background-color: #fff;
    margin-bottom: 30px;
    padding: 0 20px !important;
    .btnTab {
      color: #4e5e7e;
      font-size: 12px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      border: none;
      border-radius: 30px;
      margin-right: 10px;
      padding: 0 15px;
      background-color: #f7f7f7;
      cursor: pointer;

      b {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: url("../../assets/images/del2.png") no-repeat center center;
        background-size: cover;
        margin-left: 8px;
        margin-top: -1px;
        cursor: pointer;
      }
      b:hover {
        background-image: url("../../assets/images/del3.png");
      }
    }
    .active {
      color: #fff;
      background-color: #09ba79;
      b {
        background-image: url("../../assets/images/del1.png");
      }
    }
  }
  /*个人 退出登录*/
  .person {
    height: 60px;
    line-height: 60px;
    .avatar {
      // padding:10px 22px;
      border-radius: 50%;
      // background:url('../../assets/images/avatar.png') no-repeat center center;
      background-size: 16px;
      background-color: #dadada;
      overflow: hidden;
      display: inline-block;
      width: 38px;
      height: 38px;
      float: left;
      margin-top: 12px;
      line-height: 0;
      text-align: center;
      vertical-align: middle;
      img {
        max-width: 100%;
        height: 100%;
        display: inline-block;
        font-size: 12px;
        line-height: 2.5;
      }
    }
    .personal {
      border-right: 1px solid #efecea;
      padding-right: 12px;
      margin-right: 20px;
      margin-left: 10px;
    }
    .signOut {
      width: 14px;
      height: 16px;
      display: inline-block;
      background: url("../../assets/images/signOut.png") no-repeat center center;
      background-size: cover;
      cursor: pointer;
      margin-bottom: -3px;
    }
    .signOut:hover {
      background-image: url("../../assets/images/signOut2.png");
    }
  }
</style>
